<span class="color-container" #input>
    @if (mode === "Input") {
        <input
            class="form-control"
            (blur)="blur()"
            (focus)="focus()"
            [ngModel]="snapshot.value"
            (ngModelChange)="updateValue($event)"
            [placeholder]="placeholder"
            [style.background]="snapshot.value"
            [style.color]="snapshot.foreground"
            type="text" />
    } @else {
        <div class="circle" (click)="focus()" [style.background]="snapshot.value"></div>
    }
    <ng-template #circle>
        <div class="circle" (click)="focus()" [style.background]="snapshot.value"></div>
    </ng-template>
</span>
<div position="bottom-start" [sqxAnchoredTo]="input" *sqxModal="modal" [style.height]="'280px'" [style.width]="'230px'">
    <div
        [colorPicker]="snapshot.value"
        (colorPickerChange)="updateValue($event)"
        [cpCancelButton]="false"
        [cpDialogDisplay]="'inline'"
        [cpToggle]="true"
        [style.background]="snapshot.value"></div>
</div>
